<template>
<div>
  <div style="margin-bottom: 20px">
    <Select placeholder="请选择小区类型" v-model="xqParams.type" style="width:165px;margin-right: 10px">
      <Option value="" >全部</Option>
      <Option value="0" >老小区</Option>
      <Option value="1" >新小区</Option>
    </Select>
    <template>
      <Input v-model="xqParams.residence_name" placeholder="请输入小区名称" style="width: 165px;margin-right: 10px" />
    </template>
    <Button type="primary"  style="margin-right: 5px" @click="selectList">搜索</Button>
    <Button type="success" @click="addxq">添加</Button>
  </div>
  <template>
    <Table border :columns="Columns" :data="tableData">
      <template slot-scope="{ row }" slot="type">
        <strong v-if="row.type==='0'">老小区</strong>
        <strong v-if="row.type==='1'">新小区</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="updateInfo(row)">修改</Button>
      </template>
    </Table>
  </template>
  <Page style="text-align: right;margin-top: 20px" :current="xqParams.pageNo" :total="xqParams.totalRecord" show-sizer :page-size="xqParams.pageSize" show-elevator
        @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  <Modal
    v-model="infoModal"
    title="添加小区"
    @on-ok="infoOK">
    <Form :model="info" :label-width="50">
      <FormItem label="名称">
        <Input v-model="info.residence_name" placeholder="请添加小区名称"></Input>
      </FormItem>
      <FormItem label="蓝牌号">
        <Input v-model="info.brand" placeholder="请添加小区名称"></Input>
      </FormItem>
      <FormItem label="类型">
        <Select v-model="info.type">
          <Option value="0" >老小区</Option>
          <Option value="1" >新小区</Option>
        </Select>
      </FormItem>
      <FormItem label="区域">
        <Select v-model="info.area">
          <Option value="和平区">和平区</Option>
          <Option value="铁西区">铁西区</Option>
          <Option value="沈河区">沈河区</Option>
          <Option value="皇姑区">皇姑区</Option>
          <Option value="大东区">大东区</Option>
          <Option value="浑南区">浑南区</Option>
          <Option value="沈北新区">沈北新区</Option>
          <Option value="于洪区">于洪区</Option>
          <Option value="苏家屯区">苏家屯区</Option>
          <Option value="法库县">法库县</Option>
          <Option value="康平县">康平县</Option>
          <Option value="辽中区">辽中区</Option>
          <Option value="新民市">新民市</Option>
        </Select>
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>
import { findXQList, savexqInfo } from '../../../api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      infoModal: false,
      info: {},
      Columns: [
        {
          title: '区域',
          key: 'area'
        },
        {
          title: '小区名称',
          key: 'residence_name'
        },
        {
          title: '小区类型',
          slot: 'type'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tableData: [],
      xqParams: {
        residence_name: '',
        type: '',
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    selectList () {
      this.xqParams.pageNo = 1
      this.findXQList()
    },
    pageAction (page) {
      this.xqParams.pageNo = page
      this.findXQList()
    },
    pageSizeChange (e) {
      this.xqParams.pageSize = e
      this.findXQList(this.xqParams.pageNo)
    },
    findXQList () {
      let data = this.xqParams
      findXQList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.xqParams.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    updateInfo (e) {
      this.info = e
      this.infoModal = true
    },
    addxq () {
      this.info = {}
      this.infoModal = true
    },
    infoOK () {
      console.log(this.info)
      savexqInfo(this.info).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: '保存成功！' })
          this.findXQList()
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.findXQList()
  }
}
</script>

<style scoped>

</style>
